<!DOCTYPE html>
<html lang="{{ $:lang('en') }}">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> {{ $:title('redirect')}} | Powered By Suda System </title>
  <link rel="stylesheet" href="@static/style.css">
</head>

<body>
  <div class="content-wrapper">
    <div class="redirect">
      <div class="redirect-title">
        <div class="redirect-title-text">{= redirect }</div>
        <div class="loading">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
      @if ($?:message)
      <div class="redirect-message">{{ $:message }}</div>
      @endif
      <div class="redirect-text">
        <span id="time">@{ __('$0 seconds',$:time(5)) }</span>
        <span>@{ __('page is redirecting to') } <a href="@{ $:url }"> @{$:url} </a></span>
      </div>
      <div class="footer">
        <div class="footer-item">
          <a href="https://github.com/DXkite/suda" target="_black"> @{ __('Performance By Suda v$0',SUDA_VERSION) }</a>
        </div>
      </div>
    </div>

  </div>
</body>
<script>
  window.addEventListener('load', function () {
    const href = "@{$:url}";
    const template = "@{ __('$0 seconds','%time%') }";
    var time_counter = document.getElementById('time');
    var time = '@{$:time(5)}' || 0;
    var interval = setInterval(function () {
      if (time <= 0) {
        clearInterval(interval);
        time_counter.innerText = template.replace('%time%', 0);
        location.href = href;
      }
      else {
        time_counter.innerText = template.replace('%time%', time);
        time--;
      }
    }, 1000);
  });
</script>

</html>